<template>
    <div class="upload">
        <img src="../trade-list/img/back.png"
             @click="$router.back('/')" />
        <p class="choseBtn"
           @click="$router.push('trade')">
            <span>
                <strong>行业类型</strong>{{trade == '' ? '5个行业供您选择' : trade}}</span> <img src="./img/icon-right.png" /></p>
        <div class="upload_main"
             style="height: 13rem;">
            <uploader url="http://cn.ynhdkc.com/admin/uploadapiv2/uploadpics"></uploader>
        </div>
        <p class="uploadBtn"
           @click="setDanage">设置隐患点</p>
        <el-dialog title="提示"
                   width='80%'
                   :visible.sync="flag">
            <div class="tit">
                <i class="el-icon-warning"></i>
                <p> {{titContent}}</p>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
    name: "upload",
    data () {
        return {
            flag: false,
            imgList: '',
            titContent: '',
            imgWidth: '',
            registerFlag: '',
            imgHeight: '',
        }
    },
    computed: {
        ...mapState({
            imgInfo: 'imgInfo',
            trade: 'trade'
        }),
    },
    methods: {
        setDanage () {
            if (this.trade == '') {
                this.titContent = '请选择行业 !'
                this.flag = true
            } else {
                if (typeof (this.imgInfo.id) == 'undefined') {
                    this.titContent = '请上传图片 !'
                    this.flag = true
                } else {
                    if (this.imgInfo.width) {
                        this.$router.push('setDanger')
                    }
                }
            }
        }
    }
}
</script>

<style scoped lang="less">
.upload {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background: url(../type-list/img/bg.jpg) no-repeat;
    background-size: 100% 100%;
    .tit {
        height: 6rem;
        display: flex;
        align-items: center;
        p {
            font-size: 16px;
            font-weight: 800;
        }
        i {
            color: red;
            font-size: 30px;
            padding: 0 2rem 0 3rem;
        }
    }

    .upload_main {
        overflow: hidden;
        display: flex;
        margin-top: 6rem;
        flex-direction: column;
        align-items: center;
        form {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        input {
            height: 100%;
            width: 100%;
            opacity: 0;
        }
    }
    .choseBtn {
        background: #ffffff;
        line-height: 5rem;
        text-indent: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.5rem;
        color: #b5b5b5;
        font-size: 2rem;
        strong {
            padding-right: 1rem;
            font-size: 2.5rem;
            color: black;
        }
        img {
            display: block;
            width: 1rem;
            float: right;
        }
    }
    .uploadBtn {
        margin: 4rem auto;
        width: 70%;
        text-align: center;
        line-height: 4rem;
        font-size: 2rem;
        color: #fff;
        border-radius: 2rem;
        background: #45a8e0;
    }
}
</style>
